<template>
  <div style="width: 100%;">
    <div ref="charts" style="width: 80%;height: 600px">

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components';
import {LineChart, PieChart} from 'echarts/charts';
import {UniversalTransition, LabelLayout} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';

echarts.use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
  UniversalTransition,
  LabelLayout
]);

export default {
  name: "AutoCharts",
  data() {
    return {
      dataSet: [],
      charts: null,
      option: {},
      timer: null
    }
  },
  props: ['datas'],
  mounted() {
    this.dataSet = this.transData(this.datas);
    this.initChart();
  },
  methods: {
    initChart() {
      let domRef = this.$refs.charts;
      this.charts = echarts.init(domRef);
      this.render();
      this.timer=setTimeout(()=>{
        this.render();
      })
      // this.charts.on('updateAxisPointer', (event) => {
      //   const xAxisInfo = event.axesInfo[0];
      //   if (xAxisInfo) {
      //     const dimension = xAxisInfo.value + 1;
      //     this.charts.setOption({
      //       series: {
      //         id: 'pie',
      //         label: {
      //           formatter(e) {
      //             let data = e.data;
      //             let sum=0;
      //             for (let i = 1; i < data.length; i++) {
      //               sum+=data[i];
      //             }
      //             return data[0] + ': ' + sum;
      //           }
      //         },
      //       }
      //     });
      //   }
      // });
      // this.charts.on('mouseout',()=>{
      //   this.render()
      // })
    },
    render(){
      this.option = {
        legend: {},
        tooltip: {
          trigger: 'axis',
          showContent: true
        },
        dataset: {
          source: this.dataSet
        },
        xAxis: {type: 'category'},
        yAxis: {gridIndex: 0},
        grid: {top: '55%'},
        series: [
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'line',
            smooth: true,
            seriesLayoutBy: 'row',
            emphasis: {focus: 'series'}
          },
          {
            type: 'pie',
            id: 'pie',
            radius: '30%',
            center: ['50%', '25%'],
            emphasis: {
              focus: 'self'
            },
            label: {
              formatter(e) {
                let data = e.data;
                let sum=0;
                for (let i = 1; i < data.length; i++) {
                  sum+=data[i];
                }
                return data[0] + ': ' + sum;
              }
            },
          }
        ]
      };
      this.option && this.charts.setOption(this.option);
    },
    transData(data) {
      if (data == null || data.length === 0) return [];
      let source = [
        ['year']
      ]
      let years = [];
      let position = [];
      data.reverse().forEach((value) => {
        let date = value.updateAt?.slice(0, 10);
        value.update = date;
        if (years.indexOf(date) === -1) {
          years.push(date);
          source[0].push(date);
          for (let i = 1; i < source.length; i++) {
            source[i].length += 1;
            source[i][source[i].length - 1] = 0;
          }
        }
        if (position.indexOf(value.country) === -1) {
          position.push(value.country);
          source.push([value.country]);
          let length = source[0].length;
          source[source.length - 1].length = length;
          for (let i = 1; i < length; i++) {
            source[source.length - 1][i] = 0;
          }
        }
        let x = years.indexOf(date) + 1;
        let y = position.indexOf(value.country) + 1;
        source[y][x] = (source[y][x] || 0) + 1;
      })
      return source;
    }
  },
  watch: {
    datas(val) {
      this.dataSet = this.transData(val);
      console.log(12138,val);
      console.log(12138,this.dataSet);
      this.render();
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }
}
</script>

<style scoped>

</style>